<template>
    <div class="song-li">

        <slot name="rank">
            <!-- 存放排名 -->
        </slot>

        <div class="song-desc">
            <div class="song-name f-thide">
                <span class="song-n" :class="{ current_song: song?.id === item.id }">{{ item.name }}</span>
                <span v-if="item.alias == []">
                    (<span class="theme" v-for="al in item.alias" :key="al">{{ al }}</span>)
                </span>
            </div>
            <div class="singer f-thide">
                <slot name="sq">
                    <div class="sq spirit"></div>
                </slot>


                <slot name="ar-al">
                    <span v-for="(ar, i) in (item?.ar || item?.artists)" :key="i">{{ ar.name }} {{ i === (item.ar.length
                            || item.artists.length) - 1 ? '' : '/'
                    }}
                    </span>
                    <span> - {{ item.al.name }}</span>
                </slot>

            </div>
        </div>

        <div class="btn">
            <div v-if="(song?.id === item?.id)" class="playing" :class="{ paused: paused }">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div v-else class="play spirit"></div>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        item: Object,
        song: Object,
        paused: Boolean
    },

    data() {
        return {

        }
    },

    components: {},

    computed: {},

    methods: {

    }
}
</script>

<style lang='scss' scoped>
$grey: #888;
$red: #dd001b;

@keyframes rhythm {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(.2);
    }
}

.song-li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 375px;
    padding: 6px 0 6px 10px;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;

    .song-desc {
        flex: 1;
    }

    .f-thide {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .song-name {
        font-size: 17px;

        .current_song {
            color: $red;
        }

        .theme {
            margin-left: 4px;
            color: $grey;
        }
    }

    .singer {
        font-size: 12px;
        color: $grey;

        .sq {
            display: inline-block;
            width: 12px;
            height: 8px;
            margin-right: 4px;
        }
    }

    .spirit {
        background-image: url('../../images/icon-play.png');
        background-size: 166px 97px;
    }

    .btn {
        position: relative;
        width: 22px;
        height: 22px;
        margin-right: 10px;

        .play {
            width: 100%;
            height: 22px;
            background-position: -24px 0;
        }

        .playing {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            width: 100%;
            height: 100%;

            span {
                width: 25%;
                height: 85%;
                border-radius: 25%;
                background-color: $red;
                transform-origin: bottom;
                animation: rhythm .4s infinite linear alternate;

                &:nth-child(1) {
                    height: 65%;
                    animation-delay: .1s;
                }

                &:nth-child(2) {
                    height: 100%;
                    animation-delay: .2s;
                }
            }

            &.paused span {
                animation-play-state: paused;
            }
        }
    }
}
</style>